<template>
  <div class="app-wrap">
    <div class="content">
      <router-view></router-view>
    </div>
    <van-tabbar route>
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/ueDemo" icon="tv-o">UEDemo</van-tabbar-item>
      <van-tabbar-item replace to="/function" icon="gift-card"
        >Function</van-tabbar-item
      >
      <van-tabbar-item replace to="/about" icon="info-o">关于</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
const active = ref(0);
</script>

<style lang="scss" scoped>
.app-wrap {
  width: 100%;
  height: 100%;
  background: #242424;
  display: flex;
  flex-direction: column;
  .content {
    // box-sizing: border-box;
    flex: 1;
  }
}
.van-tabbar {
  background: #242424;
  // height: 50px;
}
.van-tabbar-item {
  color: #666;
}
.van-tabbar-item--active {
  background: #242424;
  color: #e3e3e3;
}
.van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
  border-width: 0px 0;
}
</style>
